<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="./css/element-ui.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/shopcar.css">
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  <link rel="stylesheet" href="./css/font-awesome.min.css">
</head>

<body>
  <div id="appLoading">
   <img src="./images/loading.gif" width="50px" height="50px">
   <div class="loading-text">加载中......</div>
  </div>
  <div id="shopcar" style="display:none">
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <div class="sho-pro">
          <div style="margin: 15px 0;"></div>
          <el-checkbox :indeterminate="isIndeterminate" class="sho-all-pro" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-button round size="mini" class="sho-charge" @click.native="DeleCharge">管理</el-button>
          <el-checkbox-group v-model="myPro" @change="CalcAllMoney">
            <el-row :gutter="5" class="sho-card" v-for="(pro,index) in products" :key="index">
              <el-col :span="2">
                <el-checkbox :label="pro.id">
                </el-checkbox>
              </el-col>
              <el-col :span="4">
                <div class="sho-img">
                  <img :src="pro.src" alt="">
                </div>
              </el-col>
              <el-col :span="18" class="sho-content">
                <div class="sho-title">{{pro.title}}</div>
                <div class="sho-size">规格： {{pro.size}}</div>
                <div class="sho-price">价格：<span>{{pro.addmoney}}</span></div>
                <div class="sho-number">数量：
                  <el-input-number class="sho-num-mini" v-model="pro.number" @change="SelcNumber(pro)" :min="1" size='mini' :max="pro.stocket" label="描述文字"></el-input-number>
                </div>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </div>
        <div class="sho-fix-buy">
        <span class="sho-fix-msg">
          <div class="sho-all-price">
            总计： ￥{{allMoney}}
          </div>
          <div class="sho-all-mail">
            邮费
          </div>
        </span>
        <span v-if="!dele" class="sho-all-btn" @click="Count">结算</span>
        <span v-if="dele" class="sho-all-btn dele" @click="Delete">删除</span>
      </div>
      </el-main>
      <el-footer>
        <div class="footer">
          <ul>
            <li>
              <div class="foo-icon f-p1"></div>
              <div class="foo-name">商店</div>
            </li>
            <li>
              <div class="foo-icon f-p2"></div>
              <div class="foo-name">分类</div>
            </li>
            <li>
              <div class="foo-icon f-p3"></div>
              <div class="foo-name">玫瑰花</div>
            </li>
            <li>
              <div class="foo-icon f-p4"></div>
              <div class="foo-name">购物车</div>
            </li>
            <li>
              <div class="foo-icon f-p5"></div>
              <div class="foo-name">个人中心</div>
            </li>
          </ul>
        </div>
      </el-footer>
    </el-container>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script src="./js/element-ui.js"></script>
<script type="text/javascript">
  new Vue({
    el: "#shopcar",
    data() {
      return {
        checkAll: false,
        myPro: [],
        isIndeterminate: true,
        products: [
          {
            id: 0,
            src: "./images/goods/logo.png",
            title: "Apple AirPods 蓝牙无线耳机 ",
            price: 324,
            number: 12,
            size: "50ml",
            stocket: 17,
            addmoney: 3888
          },
          {
            id: 1,
            src: "./images/goods/logo.png",
            title: "Apple AirPods 蓝牙无线耳机 适用于iPhone7/8/X手机耳机",
            price: "324",
            number: "12",
            size: "50ml",
            stocket: 13,
            addmoney: 3888
          },
          {
            id: 2,
            src: "./images/goods/logo.png",
            title: "Apple AirPods 蓝牙无线耳机 适用于iPhone7/8/X手机耳机",
            price: "324",
            number: "12",
            size: "50ml",
            stocket: 19,
            addmoney: 3888
          },
          {
            id: 3,
            src: "./images/goods/logo.png",
            title: "Apple AirPods 蓝牙无线耳机 适用于iPhone7/8/X手机耳机",
            price: "324",
            number: "12",
            size: "50ml",
            stocket: 24,
            addmoney: 3888
          },
          {
            id: 4,
            src: "./images/goods/logo.png",
            title: "Apple AirPods 蓝牙无线耳机 适用于iPhone7/8/X手机耳机",
            price: "324",
            number: "12",
            size: "50ml",
            stocket: 24,
            addmoney: 3888
          },
          {
            id: 5,
            src: "./images/goods/logo.png",
            title: "Apple AirPods 蓝牙无线耳机 适用于iPhone7/8/X手机耳机",
            price: "124",
            number: "1",
            size: "50ml",
            stocket: 24,
            addmoney: 3888
          },
          {
            id: 6,
            src: "./images/goods/logo.png",
            title: "Apple AirPods 蓝牙无线耳机 适用于iPhone7/8/X手机耳机",
            price: "24",
            number: "1",
            size: "50ml",
            stocket: 24,
            addmoney: 3888
          }
        ],
        allMoney: 0,
        dele: false
      }
    },
    methods: {
      Delete() {
        for (var i = 0; i < this.products.length; i++) {
          if (this.myPro.indexOf(this.products[i].id) != -1) {
            this.products.splice(i,1);
          }
        }
        axios.post( '',{
          data: myPro //删除的商品的id数组
        })
        .then(function(res){
          console.log(res);
        })
        .catch(function(err){
          console.log(err);
        })
      },
      DeleCharge() {
        this.dele = !this.dele
      },
      SelcNumber(pro){
        pro.addmoney = pro.number*pro.price;
        if (this.myPro.indexOf(pro.id) != -1) {
          let money = 0;
          for (var i = 0; i < this.myPro.length; i++) {
            for (var j = 0; j < this.products.length; j++) {
              if (this.products[j].id == this.myPro[i]) {
                money += this.products[j].addmoney;
              }
            }
          }
          this.allMoney = money;
        }
      },
      handleCheckAllChange(val){
        console.log(this.myPro);
        let all = [];
        for (var i = 0; i < this.products.length; i++) {
          all.push(this.products[i].id);
        }
        this.myPro = val ? all : [];
        this.isIndeterminate = false;
        let money = 0;
        for (var i = 0; i < this.myPro.length; i++) {
          for (var j = 0; j < this.products.length; j++) {
            if (this.products[j].id == this.myPro[i]) {
              money += this.products[j].addmoney;
            }
          }
        }
        this.allMoney = money;
      },
      CalcAllMoney(value){
        if (value.length == 0) {
          this.allMoney = 0;
        } else {
          let money = 0;
          for (var i = 0; i < this.myPro.length; i++) {
            for (var j = 0; j < this.products.length; j++) {
              if (this.products[j].id == this.myPro[i]) {
                money += this.products[j].addmoney;
              }
            }
          }
          this.allMoney = money;
        }
      },
      Count(){
        let aCount=[];
        for (var i = 0; i < this.myPro.length; i++) {
          for (var j = 0; j < this.products.length; j++) {
            if (this.products[j].id == this.myPro[i]) {
              let pro = new Object;
              pro.id = this.products[j].id;
              pro.number = this.products[j].number;
              aCount.push(pro);
            }
          }
        }
        axios.post( '',{
          data: JSON.stringify(aCount)
        })
        .then(function(res){
          console.log(res);
        })
        .catch(function(err){
          console.log(err);
        })
      }
    },
    mounted(){
     document.getElementById('shopcar').style.display = 'block';
     document.getElementById('appLoading').style.display = 'none';
    }
  })
</script>

</html>
